<template>
	<view class="expert-verify">
		<!-- 对话框 -->
		<uni-popup ref="popupDialogNotice" type="dialog" @change="change">
			<uni-popup-dialog class="dialogNotice" type="success" title="提示" content="请先完善个人信息" :before-close="true" @confirm="dialogConfirm"
			 @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<view class="personal-info-top">
			<view class="personal-info-top-contain">
				<view class="personal-info-top-contain-pic">
					<image v-if="userInfoData.accountHead" class="top-bar-info-img" :src="userInfoData.accountHead" mode="aspectFit"></image>
					<image v-else src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/nologinaccount.png" class="top-bar-info-img" mode="aspectFit"></image>
				</view>
				<view class="personal-info-top-contain-info">
					<view class="personal-info-top-contain-title">
						{{titleName}}
					</view>
					<view class="personal-info-top-contain-account">
						登录账号：{{userInfoData.phoneNumber}}
					</view>
				</view>
			</view>
		</view>
		<view class="personal-info-base">
			<view class="personal-info-base-title">
				<view class="person-left-ver">

				</view>
				<view class="person-info-base-tip">
					基本信息
				</view>
			</view>
		</view>
		<view class="evan-form-show">
			<evan-form :hide-required-asterisk="hideRequiredAsterisk" ref="form" :model="info">
				<evan-form-item label="研究领域" prop="searchArea">
					<view :class="info.searchArea==='请选择'?'unSelect searchText':'searchText'" @click="openPop">{{info.searchArea}}</view>
				</evan-form-item>
				<evan-form-item label="研究方向" prop="disSearchData">
					<view :class="info.disSearchData==='请选择'?'unSelect searchText':'searchText'" @click="toSearchTabs">{{info.disSearchData}}</view>
				</evan-form-item>
				<evan-form-item label="职务/头衔" prop="jobTitle">
					<input class="form-input" placeholder-class="form-input-placeholder" v-model="info.jobTitle" placeholder="请输入职务/头衔" />
				</evan-form-item>
				<evan-form-item label="最高职称">
					<input class="form-input" placeholder-class="form-input-placeholder" v-model="info.topTitle" placeholder="请输入职称" />
				</evan-form-item>
				<view class="expert">
					<view class="expert-title star">上传宣传照</view>
					<view v-if="!imgSrc">
						<image @click="uploadImage" class="expert-upload" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/public/upload-img.png"
						 mode="aspectFit"></image>
					</view>
					<view v-else class="expert-upload">
						<image @click="uploadImage" mode="aspectFit" :src="imgSrc"></image>
					</view>
				</view>
			</evan-form>

		</view>
		<view class="info">
			<checkbox-group @change="handleCheckChange">
				<checkbox value="cb" :value="'1'" :checked="isChecked" color="#008BFF" style="transform:scale(0.7)" />希望官网展示我的信息
			</checkbox-group>
		</view>
		<!-- 提交按钮 -->
		<view class="verify" v-show="isShowSubmit">
			<button @click="toVerify">提交认证</button>
		</view>
		<uni-popup :maskClick="false" ref="popup" type="bottom" :scrollWin='true'>
			<view class="popup-content">

				<view class="popup-title">
					<view class="footer-cancel" @click="resetTechField">
						重置
					</view>
					<view class="title">
						研究领域 <text style='color:#BFBFBF;font-size:26rpx;font-weight: normal;'>(限选5个)</text>
					</view>
					<view class="footer-ok" @click="handleSure">
						确认
					</view>

				</view>
				<view class="tech-field-panel">
					<view v-for="(c, index) in researchFields" :key="index">
						<view v-bind:class="[c.selected? 'tech-item' : 'tech-item-normal']" @click="selectSearchField(index)">
							<view v-bind:class="[c.selected? 'category-item-title' : 'category-item-title-normal']">
								{{c.researchName}}
							</view>
							<image v-if="c.selected" class="gouxuan" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/public/gouxuan.png"
							 mode="">
								</mage>
						</view>
					</view>

				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import EvanForm from '@/components/evan-form/evan-form.vue'
	import EvanFormItem from '@/components/evan-form/evan-form-item.vue'
	import utils from '@/components/evan-form/utils.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import sunUiUpimg from '@/components/sunui-upimg/sunui-upimg.vue';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			EvanForm,
			EvanFormItem,
			uniPopup,
			sunUiUpimg,
			uniPopupMessage,
			uniPopupDialog
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				titleName: '',
				selectFieldLength: 0,
				userInfoData: {},
				homeChecked: 0,
				isChecked: true,
				headPortrait: '',
				isShowSubmit: true,
				imgSrc: '',
				photoFormData: {
					model: 'experts'
				},

				imageList: [],
				category: 'image',
				date: currentDate,
				hideRequiredAsterisk: false,
				researchFields: [],
				sexes: [{
						name: '男',
						value: 'man'
					},
					{
						name: '女',
						value: 'woman'
					}
				],
				// 表单的内容必须初始化
				searchArea: [],
				info: {
					searchArea: '请选择',
					research: '',
					jobTitle: '',
					topTitle: '',
					desc: '',
					disSearchData: '请选择'
				},
				rules: {
					disSearchData: {
						required: true,
						message: '请选择研究方向'
					},
					searchArea: {
						required: true,
						message: '请选择研究领域'
					},
					topTitle: {
						required: true,
						message: '请输入职称'
					},
					jobTitle: {
						required: true,
						message: '请输入职务头衔'
					},
					name: {
						required: true,
						message: '请输入姓名'
					},
					email: [{
						required: true,
						message: '请输入邮箱'
					}, {
						type: 'email',
						message: '邮箱格式不正确'
					}],
					desc: [{
							required: true,
							message: '请输入简介'
						},
						{
							min: 10,
							max: 30,
							message: '简介必须在10到30个字之间'
						}
					],
					phone: [{
							required: true,
							message: '请输入手机号'
						},
						{
							validator: (rule, value, callback) => {
								// 注意这里如果用的是methods里的isMobilePhone将不生效
								if (this.$utils.isMobilePhone(value)) {
									callback()
								} else {
									callback(new Error('手机号格式不正确'))
								}
							}
						},
					],
					sex: {
						required: true,
						message: '请选择性别'
					},
					msgType: 'success',

				}
			}
		},
		mounted() {
			// 这里必须放在mounted中，不然h5，支付宝小程序等会找不到this.$refs.form
			this.$refs.form.setRules(this.rules)
		},
		onLoad() {
			this.loadIsPerfetInfo();
			this.userInfoData = uni.getStorageSync('userInfo');
			this.date = this.userInfoData.birthdate ? this.userInfoData.birthdate.split('T')[0] : '';
			let arr = [...this.userInfoData.phoneNumber];
			for (let i = 0; i < arr.length; i++) {
				if (i > 2 && i < 7) {
					arr[i] = "*"
				}
			}
			this.replacePhonNumber = arr.join('');
			if (this.userInfoData.realName) {
				this.titleName = this.userInfoData.realName;
			} else {
				this.titleName = ('用户' + this.replacePhonNumber)
			}
			this.getSearchArea();
			this.getExpertDetails();

		},
		watch: {
			searchData(arr) {
				this.searchData.length === 0 ? this.info.disSearchData = '请选择' : '';
				this.searchData.length === 1 ? this.info.disSearchData = this.searchData[0] : '';
				this.searchData.length > 1 ? this.info.disSearchData = this.searchData[0] + ',+' : '';
			}
		},

		computed: {
			...mapState('userStore', ['searchData']),
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
		},
		methods: {
			...mapMutations('userStore', ['saveSearchData']),
			change(e) {
				console.log('popup ' + e.type + ' 状态', e.show)
			},
			/**
			 * 对话框取消按钮
			 */
			dialogClose(done) {
				uni.navigateBack()
				// 需要执行 done 才能关闭对话框
				done()
			},
			dialogConfirm(done) {
				uni.redirectTo({
					url: '/pagesB/personal-info/personal-info'
				})
				// 需要执行 done 才能关闭对话框
				done()
			},
			//是否完善个人信息0未完善1已经完善
			loadIsPerfetInfo() {
				this.$request.get({
					url: 'user/selectMyCompleteForExpert',
				}).then(res => {
					console.log(res, '个人信息')
					if (res === 0) {
						this.$refs.popupDialogNotice.open();
					}
				})
			},
			//专家详情数据
			getExpertDetails() {
				let that = this;
				this.$request.get({
					url: 'ExpertInfo/selectMyExperInfo'
				}).then(res => {
					console.log('专家详情', res)
					this.info.jobTitle = res.jobTitle
					this.info.topTitle = res.topTitle
					this.headPortrait = res.headPortrait
					if(res.netImage){
						this.imgSrc = res.netImage;
					}else {
						this.imgSrc = res.headPortrait
					}
					this.saveSearchData(res.research.split(','))
					let searchArea = res.researchArea.split(',');
					console.log(this.searchArea)

					if (searchArea.length === 0) {
						this.info.searchArea = '请选择'
					} else if (searchArea.length === 1) {
						this.info.searchArea = searchArea[0]
					} else if (searchArea.length > 1) {
						this.info.searchArea = searchArea[0] + ',+'
					}
					this.isChecked = parseFloat(res.showPublic) === 0 ? true : false
					this.homeChecked = res.showPublic
					console.log(this.researchFields)
					let researchAreaId = res.researchAreaId.split(',');
					let arr = [];
					searchArea.forEach((item, index) => {
						arr.push({
							code: researchAreaId[index],
							name: item
						})
					})
					this.searchArea = arr;
					console.log('researchArea', arr)
				})
			},
			//获取官网显示是否展示
			handleCheckChange(e) {
				if (e.detail.value.length === 0) {
					this.homeChecked = 1;
				} else if (e.detail.value.length === 1) {
					this.homeChecked = 0;
				}
			},
			//认证
			toVerify() {
				//参数校验
				if (this.searchArea.length === 0) {
					uni.showToast({
						title: '请选择研究领域',
						icon: 'none'
					})
					return
				}
				if (this.searchArea.length > 5) {
					uni.showToast({
						title: '研究领域最多5个',
						icon: 'none'
					})
					return
				}
				if (this.searchData.length === 0) {
					uni.showToast({
						title: '请输入研究方向',
						icon: 'none'
					})
					return
				}
				if (this.info.jobTitle === '') {
					uni.showToast({
						title: '请输入职务/头衔',
						icon: 'none'
					})
					return
				}
				if (this.info.jobTitle.length > 15) {
					uni.showToast({
						title: '职务/头衔不超过15个字',
						icon: 'none'
					})
					return
				}
				if (this.info.topTitle.length > 15) {
					uni.showToast({
						title: '最高职称不超过15个字',
						icon: 'none'
					})
					return
				}
				if (this.imgSrc === '') {
					uni.showToast({
						title: '请上传宣传照',
						icon: 'none'
					})
					return
				}
				let params = {};
				let that = this;
				let researchArea = [];
				console.log('searchArea', this.searchArea)
				this.searchArea.map((item) => {
					researchArea.push(item.code)
				})
				researchArea = researchArea.join(',')
				params.researchArea = researchArea
				params.research = this.searchData.join(',')
				params.jobTitle = this.info.jobTitle
				params.topTitle = this.info.topTitle
				params.headPortrait = this.headPortrait
				params.showPublic = this.homeChecked
				try {
					const userInfo = uni.getStorageSync('userInfo');
					if (userInfo) {}
					this.$request.post({
						url: 'ExpertInfo/addExperInfo',
						data: params,

					}).then(res => {
						uni.showToast({
							title: '提交成功',
							duration: 1000,
							success: () => {
								this.saveSearchData([])
								setTimeout(() => {
									uni.navigateBack({
										url: '/pagesB/verify/verify'
									})
								}, 500)
							}
						})


					})
				} catch (e) {
					// error
				}
			},
			uploadImage() {
				let that = this;
				try {
					const userInfo = uni.getStorageSync('userInfo');
					if (userInfo) {}
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: function(res) {

							uni.uploadFile({
								url: that.$baseUrl + 'upLoading',
								filePath: res.tempFilePaths[0],
								formData: {
									model: 'experts'
								},
								name: 'file',
								header: {
									token: userInfo.token
								},
								success: (e) => {
									let res = JSON.parse(e.data);
									if (res.ret) {
										uni.showToast({
											title: '图片上传成功'
										})
										that.headPortrait = res.data
										that.imgSrc = res.data
									} else {
										uni.showToast({
											title: res.errmsg,
											icon: 'none'
										})
									}
								},
								fail: res => {
									uni.showToast({
										title: '图片上传失败',
										icon: 'none'
									})
								}
							})
						},
						fail: res => {}
					});

				} catch (e) {
					// error
				}


			},
			getImageInfo1(e) {},
			//研究方向页面
			toSearchTabs() {
				uni.navigateTo({
					url: '/pagesB/research-direction/research-direction'
				})
			},
			//文件上传成功回调
			formSubmit(e) {
				this.$refs.upload.uploadFile(Object.assign(formData), function(resp) {
					if (resp.code == 200) {

					} else {

					}
				})
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//研究领域确定
			handleSure() {
				this.searchArea = [];
				for (var i = 0; i < this.researchFields.length; i++) {
					if (this.researchFields[i].selected) {
						this.searchArea.push({
							name: this.researchFields[i].researchName,
							code: this.researchFields[i].code
						})
					}
				}
				if (this.searchArea.length === 0) {
					this.info.searchArea = '请选择'
				} else if (this.searchArea.length === 1) {
					this.info.searchArea = this.searchArea[0].name
				} else if (this.searchArea.length > 1) {
					this.info.searchArea = this.searchArea[0].name + ',+'
				}
				this.closePop();
			},
			//重置技术项目领域
			resetTechField() {
				this.selectFieldLength = 0
				for (var i = 0; i < this.researchFields.length; i++) {
					this.$set(this.researchFields[i], 'selected', false)
				}
			},
			//点击技术项目领域
			selectSearchField(index) {
			
				if (this.researchFields[index].selected) {
					this.selectFieldLength -= 1
				} else {
					if (this.selectFieldLength >= 5) {
						uni.showToast({
							title: '最多选择五个',
							icon: 'none'
						})
						return
					} 
					this.selectFieldLength += 1
				}
				this.$set(this.researchFields[index], 'selected', this.researchFields[index].selected ? false : true)

			},
			//获取研究领域
			getSearchArea() {
				let that = this
				this.$request.get({
					url: 'manager/Research/selectAllResearch',
					data: {}
				}).then(res => {
					this.researchFields = res;
					for (let k in this.researchFields) {

						let index = this.searchArea.findIndex((v) => {
							console.log(v.code)
							return v.code == that.researchFields[k].code;
						})
						if (index != -1) {
							this.$set(this.researchFields[k], 'selected', true)

						}
					}
				})
			},
			closePop() {
				this.$refs.popup.close();
				this.isShowSubmit = true;
			},
			openPop() {
				this.$refs.popup.open();
				this.isShowSubmit = false;
			},
			save() {
				this.$refs.form.validate((res) => {
					if (res) {
						uni.showToast({
							title: '验证通过'
						})
					}
				})
			},
			utilsSave() {
				utils.validate(this.info, this.rules, (res, errors) => {
					if (res) {
						uni.showToast({
							title: '验证通过'
						})
					}
				})
			},
			validateSingle() {
				this.$refs.form.validateField('email', (res) => {
					if (res) {
						uni.showToast({
							title: '验证通过'
						})
					}
				})
			},
			validateMultiple() {
				this.$refs.form.validateField(['email', 'phone'], (res) => {
					if (res) {
						uni.showToast({
							title: '验证通过'
						})
					}
				})
			},
			hideReqired() {
				this.hideRequiredAsterisk = !this.hideRequiredAsterisk
			},
			isMobilePhone() {
				const reg = /^1\d{10}$/
				if (reg.test(value)) {
					return true
				}
				return false
			},
			isMobile(rule, value, callback) {
				if (this.$utils.isMobilePhone(value)) {
					callback()
				} else {
					callback(new Error('手机号格式不正确'))
				}
			},
			sexChange(e) {
				this.info.sex = e.detail.value
			}
		}
	}
</script>

<style scoped lang='scss'>
	.dialogNotice {
		margin: 0 auto;
	}

	.personal-info-top-contain-pic {
		width: 144upx;
		height: 144upx;
		padding: 2upx;
		background-color: #FFFFFF;
		border-radius: 50%;

	}

	.person-info-base-tip {
		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-left: 21upx;
	}

	.person-left-ver {
		width: 5upx;
		height: 32.5upx;
		background-color: #2A7DFA;
	}

	.personal-info-base {
		background-color: #FFFFFF;
	}

	.personal-info-base-title {
		display: flex;
		align-items: center;
		padding: 23upx 30upx;
		border-bottom: 1upx solid #DDDDDD;
	}

	.top-bar-info-img {
		width: 140upx;
		height: 140upx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.personal-info-top-contain-info {
		margin-left: 34upx;
	}

	.personal-info-top-contain-title {
		font-size: 32upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(255, 255, 255, 1);
	}

	.personal-info-top-contain-account {
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}

	.personal-info-top-contain {
		display: flex;
		align-items: center;
	}

	.personal-info-top {
		width: 100%;
		height: 273upx;
		background-image: url("https://www.innovationgloble.com/wxs/img/wx/info-banner4.png");
		background-size: 100%;
		position: relative;
		padding: 66upx 47upx;
	}

	.star {
		position: relative;

		&::before {
			content: '*';
			color: #F56C6C;
			width: 30rpx;
			position: absolute;
			display: inline-block;
			left: -24upx;
		}
	}

	.expert {
		padding: 0 26upx;
	}

	.expert-upload {
		width: 200upx;
		height: 200upx;
		position: relative;

		image {
			width: 200upx;
			height: 200upx;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.unSelect {
		color: #808080 !important;
	}

	.searchText {
		font-size: 28upx;
		color: #333;
		text-align: right;
		width: 100%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		height: 60upx;
	}

	.expert {
		border-bottom: 2upx solid #F5F5F5;
		padding-bottom: 34upx;

		.expert-title {
			color: #666;
			line-height: 82upx;
			padding: 4upx 0upx;
		}
	}

	.uni-input {
		font-size: 28rpx;
		color: #333;
	}

	.footer-btns {
		display: flex;
		width: 100%;
		height: 98upx;
		flex-direction: row;
		background-color: #FFFFFF;
	}

	.gouxuan {
		position: absolute;
		right: 0upx;
		bottom: 0upx;
		width: 40upx;
		height: 40upx;
	}

	.category-item-title-normal {
		font-size: 28upx;
		color: #48526B;
		text-align: center;
		white-space: pre-wrap;
		padding: 0 12upx;
	}

	.category-item-title {
		font-size: 28upx;
		color: #268CFF;
		text-align: center;
		white-space: pre-wrap;
		padding: 0 12upx;
	}

	.popup-content {
		width: 100%;
		height: 918upx;
		display: flex;
		flex-direction: column;
		border-radius: 20upx 20upx 0 0;
		overflow: hidden;
		z-index: 99999;
		padding-bottom: 100upx;
		margin-bottom: -100upx;
	}


	.tech-item-normal {
		width: 212upx;
		height: 100upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-top: 20upx;

		box-shadow: 0 0 24px 0 rgba(56, 73, 184, 0.08);
		border-radius: 8upx;
		background-color: #F5F5F5;
	}

	.tech-item {
		width: 212upx;
		height: 100upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-top: 20upx;

		box-shadow: 0 0 24px 0 rgba(56, 73, 184, 0.08);
		border-radius: 8upx;
		background-color: #E1F2FE;
	}

	.tech-field-panel {
		background-color: #FFFFFF;
		padding: 20upx 20upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.tech-field-desc {
		color: #999999;
		font-size: 26upx;
	}

	.popup-title {
		display: flex;

		text-align: center;
		background-color: #FFFFFF;
		box-sizing: border-box;
		height: 114upx;
		align-items: center;
		border: 2upx solid #F7F7F7;
	}

	.popup-title .footer-cancel {
		display: flex;
		font-size: 32upx;
		color: #333;
		padding-left: 34upx;
	}

	.popup-title .footer-ok {
		display: flex;
		font-size: 32upx;
		color: #333;
		padding-right: 34upx;
	}

	.popup-title .title {
		flex: 1;
		font-size: 34upx;
		color: #2B3754;
		font-weight: bold;
	}

	.tech-field-panel {
		flex: 1;
		overflow: scroll;
		background-color: #FFFFFF;
		padding: 0 20upx 20upx 20upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.tech-field-desc {
		color: #999999;
		font-size: 26upx;
	}

	.info {
		margin-top: 16upx;
		background-color: #FFFFFF;
		line-height: 116upx;
		padding: 0 39upx;
	}

	.evan-form-show {
		padding: 0 30rpx;
		background-color: #fff;

		.form-input {
			font-size: 28rpx;
			color: #333;
			text-align: right;
			width: 100%;
			box-sizing: border-box;
			height: 60rpx;

			&.textarea {
				height: 240rpx;
				padding: 24rpx 0;
			}
		}

		.form-input-placeholder {
			color: #999
		}

		&__button {
			width: 100%;
			height: 88rpx;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			font-size: 36rpx;
			color: #fff;
			margin-top: 20rpx;
			background-color: #2D87D5;

			&::before,
			&::after {
				border: none;
			}
		}

		.customize-form-item {
			&__label {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 16rpx;
			}

			&__radio {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;

				&__text {
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}

	.expert-verify {
		.verify-head {
			border-top: 2upx solid #F5F5F5;
			padding: 34upx 66upx 44upx 66upx;
			background-color: #FFFFFF;
			margin-bottom: 16upx;

			.title {
				text-align: center;
				margin-bottom: 24upx;

				image {
					width: 144upx;
					height: 44upx;
					margin: 0 auto;
				}
			}

			.verify-img {
				text-align: center;

				image {
					width: 606upx;
					height: 108upx;
					margin: 0 auto;
				}
			}

			.verify-text {
				display: flex;
				margin-top: 10upx;

				view {
					flex: 1;
					font-size: 26upx;
					font-weight: 400;
					color: rgba(52, 103, 196, 1);
					line-height: 36upx;
				}

				view:nth-child(2) {
					text-align: center;
				}

				view:nth-child(3) {
					text-align: right;
				}
			}
		}

		.verify {
			width: 100%;
			height: 88upx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			padding: 28upx 32upx;
			margin-bottom: 80upx;

			button {
				background: rgba(0, 139, 255, 1);
				border-radius: 10upx;
				font-size: 34upx;
				font-weight: 500;
				height: 88upx;
				border-radius: 44upx;
				color: rgba(255, 255, 255, 1);
			}
		}
	}
</style>
